<template>
  <div class="tabbar">
    <div class="tabbar-content">
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <component
            v-if="Boolean(route.meta.keepAlive)"
            :key="route.name"
            :is="Component"
          ></component>
        </keep-alive>
        <component
          v-if="!Boolean(route.meta.keepAlive)"
          :key="route.name"
          :is="Component"
        ></component>
      </router-view>
    </div>
    <van-tabbar route>
      <van-tabbar-item
        replace
        :to="route.path"
        :icon="route.activeIcon"
        v-for="route in APP_CONFIG.tabbar?.tabbarList || []"
        :key="route.name"
        >{{ route.title }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import APP_CONFIG from "@/core/config";
defineOptions({ name: "tabbar" });
</script>

<style lang="less" scoped>
.tabbar {
  overflow: hidden;
  height: 100%;

  .tabbar-content {
    height: calc(100% - 50px);
  }
}
</style>
